import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { inject, observer } from 'mobx-react';

function CfgDialog({ store }) {
  const formRef = React.createRef();
  const onOk = async () => {
    try {
      let values = await formRef.current.validateFields();
      store.saveCfg(values);
    } catch (e) {
    }
  };

  const onCancel = () => {
    store.closeCfgDialog();
  };

  const { editData, visible, loading } = store.cfgDialog;
  const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
  let title = editData.id ? '编辑系统参数' : '新增系统参数';

  return (<Modal title={title} width={620}
                 destroyOnClose={true}
                 visible={visible}
                 confirmLoading={loading}
                 onOk={onOk}
                 onCancel={onCancel}>
    <Form {...layout} ref={formRef} initialValues={editData}>
      <Form.Item name='id' noStyle={true}><Input type="hidden"/></Form.Item>
      <Form.Item label="所属分类" name='categoryId' rules={[{ required: true, message: '请选择所属分类' }]}>
        <Select>
          {store.categoryList.map(item => {
            return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>;
          })}
        </Select>
      </Form.Item>
      <Form.Item label="参数名称" name='name' rules={[{ required: true, message: '请输入字典名称' }]}>
        <Input autoComplete="off"/>
      </Form.Item>
      <Form.Item label="参数标识" name='key' rules={[{ required: true, message: '请输入参数标识' }]}>
        <Input autoComplete="off"/>
      </Form.Item>
      <Form.Item label="参数值" name='value' rules={[{ required: true, message: '请输入参数值' }]}>
        <Input autoComplete="off"/>
      </Form.Item>
      <Form.Item label="参数描述" name='remark'>
        <Input.TextArea/>
      </Form.Item>
    </Form>
  </Modal>);
}

export default inject('store')(observer(CfgDialog));
